<template>
	<view>
	  <view class="userInfo">
		<image
		  class="headIcon"
		  :src="`${OSS_URL}/urm/bindDevice/baba.png`"
		  mode="scaleToFill"
		/>
		<text class="name">爸爸</text>
		<text class="phone"></text>
		<text class="info">(186****2333)</text>
		<view class="tip">申请绑定孩子账号</view>
	  </view>
  
	  <view class="reminder">
		<view class="title">亲子关系</view>
		<view class="relationship">
		  <view class="user">
			<image
			  :src="`${OSS_URL}/urm/bindDevice/baba.png`"
			  mode="scaleToFill"
			/> 
			<text class="accountNumber">孩子账号</text>
		  </view>
		  <image
			class="gling"
			:src="`${OSS_URL}/urm/bindDevice/gling.png`"
			mode="scaleToFill"
		  />
		  <view class="user">
			<image
			  :src="`${OSS_URL}/urm/bindDevice/baba.png`"
			  mode="scaleToFill"
			/>
			<text class="accountNumber">爷爷账号</text>
		  </view>
		</view>
	  </view>
	  <!-- 设备信息 -->
	  <view class="reminder">
		  <view class="title">设备信息</view>
		  <view class="serialNumber">
			  <text class="xlh">序列号：</text>
			  <text class="">16234992571504193</text>
		  </view>
	  </view>
  
	  <view class="sub" @click="subFun"> 同意 </view>
	  <view class="Rejected" @click="subFun"> 拒绝 </view>
	</view>
  </template>
  
  <script setup>
  const OSS_URL = import.meta.env.VITE_OSS_HOST;
  </script>
  
  <style lang="scss" scoped>
  .userInfo {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
  
	.headIcon {
	  width: 120upx;
	  height: 120upx;
	  margin-top: 50upx;
	}
	.name {
	  font-size: 32upx;
	  color: rgba(51, 51, 51, 1);
	  margin-top: 20upx;
	}
	.info {
	  margin-top: 10upx;
	  font-size: 28upx;
	  color: rgba(169, 170, 181, 1);
	}
  
	.tip {
	  margin-top: 30upx;
	}
  }
  
  .reminder {
	width: 690upx;
	margin-left: 30upx;
	border-radius: 20upx;
	background-color: #fff;
	padding: 30upx 40upx;
	box-sizing: border-box;
	margin-top: 50upx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
  
	.relationship {
	  width: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
  
	  .user {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30upx;
  
		image {
		  width: 100upx;
		  height: 100upx;
		}
		.accountNumber {
		  margin-top: 20upx;
		  font-size: 30upx;
		  color: rgba(102, 102, 102, 1);
		}
	  }
  
	  .gling {
		width: 40upx;
		height: 8upx;
	  }
	}
  
	.serialNumber{
	  display: flex;
	  width: 100%;
	  // align-items: center;
	  margin-top: 30upx;
	  font-size: 28upx;
	  .xlh{
		  color: rgba(134, 134, 134, 1);
	  }
	}
  }
  
  .sub {
	width: 690upx;
	height: 90upx;
	border-radius: 20upx;
	color: #fff;
	font-size: 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 120upx;
	background-color: rgba(97, 93, 255, 1);
	margin-left: 30upx;
  }
  
  .Rejected {
	width: 690upx;
	height: 90upx;
	border-radius: 20upx;
	color: rgba(97, 93, 255, 1);
	font-size: 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40upx;
	background-color: rgba(232, 232, 250, 1);
	margin-left: 30upx;
  }
  </style>